<template>
	<div>
		<p class="p">账号资料</p>
		<div class="headPortrait">
			<p class="Text">头像</p>
			<image src="/static/logo.png"></image>
		</div>
		<div class="nickName">
			<p class="Text">昵称</p><span style="text-align: right; margin-left: 60%;">{{nickName}}</span>
		</div>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const nickName = ref('123456')
</script>

<style scoped>
	.p {
		width: 100%;
		height: 50px;
		line-height: 50px;
		border-bottom: 2px solid black;
		padding-left: 30px;
		font-size: 20px;
	}

	.headPortrait {
		display: flex;
		width: 100%;
		height: 80px;
		align-items: center;
		border-bottom: 1px solid black;
	}

	.Text {
		padding-left: 30px;
	}

	.headPortrait image {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		margin-left: 60%;
	}

	.nickName {
		display: flex;
		width: 100%;
		height: 50px;
		align-items: center;
		border-bottom: 1px solid black;

	}
</style>